<template>
  <div class="pdl-24 pdr-24">
    <div class="notice-header df aic fs-30 jcsb">
      <svg-icon icon-class="left" class="fs-30" @click="$router.replace('/dashboard')"></svg-icon>
      <p>通知</p>
    </div>
    <div class="notice-item" v-for="item in list" :key="item.id">
      <p class="fs-24 font333 pdb-16">{{ item.text }}</p>
      <p class="fs-20 font999" style="text-align: left">{{ item.time }}</p>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted, watch } from 'vue';
  import { useRoute } from 'vue-router';
  import { useStore } from '@/store';
  import { postNoticeList } from '@/api/common';
  import { SvgIcon } from '@/components/svg-icon';

  export default defineComponent({
    name: 'NoticeComponent',
    components: {
      SvgIcon,
    },
    setup() {
      const route = useRoute();

      const store = useStore();

      const state = reactive({
        list: [] as any,
      });

      /**
       * @description 加载表格数据
       */

      onMounted(async () => {
        const res = await postNoticeList();
        state.list = res.list;
      });

      return {
        ...toRefs(state),
      };
    },
  });
</script>
<style lang="scss" scoped>
  .notice-header {
    height: 68px;
    &:after {
      content: '';
    }
  }
  .notice-item {
    padding: 24px;
    border-bottom: 1px solid #ccc;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    overflow: hidden;
    width: 656px;
  }
</style>
